<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-06-26 18:23:17
 * @LastEditors: Andy
 * @LastEditTime: 2023-06-28 14:52:05
-->
<template>
    <div>
        <!--  opened Dialog 打开动画结束时的回调 -->
        <el-dialog @opened="opened" :title="info.title" :visible.sync="info.isShow" :before-close="close">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="上级菜单" :label-width="formLabelWidth">
                    <el-select v-model="form.pid" placeholder="请选择上级菜单">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in menus" :key="item.id" :label="item.title" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-radio v-model="form.type" :label="1">目录</el-radio>
                    <el-radio v-model="form.type" :label="2">菜单</el-radio>
                </el-form-item>

                <el-form-item label="菜单图标" :label-width="formLabelWidth" v-show="form.type === 1">
                    <el-select v-model="form.icon" placeholder="请选择菜单图标">
                        <el-option v-for="item in iconList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="菜单地址" :label-width="formLabelWidth" v-show="form.type === 2">
                    <el-select v-model="form.url" placeholder="请选择菜单地址">
                        <el-option v-for="item in urlList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
                <el-button v-else type="primary" @click="amend">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { menuAdd, menuOne, menuUpdate } from '@/request/api'
import { successAlert } from '@/utils/alert'
import { mapActions, mapGetters } from 'vuex'
export default {
    data() {
        return {
            formLabelWidth: '120px',
            urlList: ['menu', 'role', 'member', 'cate', 'specs', 'goods', 'user', 'banner', 'seckill'],  //菜单地址
            iconList: ['el-icon-setting', 'el-icon-message-solid', 'el-icon-s-promotion'],   //图标
            form: {
                title: '',   //标题
                pid: 0,   //上级分类编号
                icon: '',   //图标
                type: 1,   //类型1目录2菜单
                url: '',  ////菜单地址
                status: 1,  //状态1正常2禁用
            },
            //校验正则
            rules: {
                title: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    props: ['info'],
    methods: {
        ...mapActions({
            requestMenu: 'menu/listActions'
        }),
        //修改
        amend() {
            menuUpdate(this.form).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    //消息提示
                    successAlert(res.msg)
                    //取消弹窗
                    this.cancel()
                    //更新列表
                    this.requestMenu()
                }
            })
        },
        //回显数据  从list传过来的
        getDetail(id) {
            // console.log(id);
            menuOne({ id }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    this.form = res.list
                    this.form.id = id
                }
            })
        },
        //取消弹窗
        cancel() {
            this.info.isShow = false
            this.form = {
                title: '',   //标题
                pid: 0,   //上级分类编号
                icon: '',   //图标
                type: 1,   //类型1目录2菜单
                url: '',  ////菜单地址
                status: 1,  //状态1正常2禁用
            },
                //重置校验表单  resetFields对整个表单进行重置
                this.$refs.form.resetFields()
        },
        //那个x取消弹窗的
        close() {
            this.cancel()
        },

        //提交表单信息
        confirm() {
            // console.log(this.form);
            this.$refs.form.validate((val) => {
                // console.log(val);
                if (!val) {
                    return
                }
                menuAdd(this.form).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        //消息提示
                        successAlert(res.msg)
                        //弹窗消失
                        this.cancel()
                        //更新列表
                        this.requestMenu()
                    }
                })
            })

        },
        // // 打开dialog动画结束时的回调
        opened() {
            // 发起菜单列表请求同时渲染数据
            this.requestMenu()
        }
    },
    mounted() { },
    watch: {},
    computed: {
        ...mapGetters({
            menus: 'menu/list'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>